<template>

    <div class="order-tabs">

        <ul class="order-tabs-outer">
            <li v-for="item in outer" :key="item.key" v-show="item.value == 'all_count' || counts[item.value] > 0" @click="tabsClick(item)" :class="{active: value == item.key}">
                <span v-text="item.label"></span>
                <em v-text="counts[item.value] || 0"></em>
            </li>
        </ul>

        <div class="order-tabs-inner" v-if="innerCount> 0" :class="{active:popper}">
            <button><i class="iconfont icon-gengduodingdanguanli"></i></button>
            <ul>
                <li :class="{active: value == item.key}" v-for="item in inner" :key="item.key" v-show="counts[item.value] > 0">
                    <span @click="tabsClick(item)" v-text="getText(item)"></span>
                </li>
            </ul>
        </div>

        <!--
        <client-only>
            <el-tabs v-model="form.order_state" type="card" @tab-click="tabsClick($event.name)">
            <el-tab-pane v-for="item in tabs_outer_list" :key="item.key" :name="item.key" :label="item.label +'(' +tableCount[item.value] +')'" />
        </el-tabs>
        <div class="tabs_dialog" v-show="tabs_inner_count > 0">
            <button @click="tabs_dialog = !tabs_dialog" class="tabs_dialog_btn">
                ●●●
            </button>
            <ul v-show="tabs_dialog" class="tabs_dialog_inner">
                <li class="tabs_dialog_inner_li" :class="{'display-none': tableCount[item.value] == 0,active: form.order_state == item.key}" v-for="item in tabs_options.inner" :key="item.key" @click="tabsClick(item.key)" v-text="item.label +'(' +tableCount[item.value] +')'"></li>
            </ul>
        </div>
        </client-only>
         -->
    </div>

</template>
<script>
export default {
    props: {
        value: { type: [String, Number], default: '0' },
        counts: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            popper: false,
            outer: [
                { key: "0", label: "All orders", value: "all_count" },
                { key: "1", label: "Unpaid", value: "not_pay_count" },
                { key: "66", label: "Customization", value: "custom_count" },
                { key: "15", label: "Suspended", value: "problem_state_count" },
                { key: "2", label: "Paid", value: "have_pay_count" },
            ],
            inner: [
                { key: "34", label: "In production", value: "in_producting_count" },
                { key: "5", label: "Production completed", value: "producting_ok_count" },
                { key: "6", label: "Quality checked", value: "testing_ok_count" },
                { key: "7", label: "In transit", value: "have_logistics_count" },
                { key: "9", label: "Delivered", value: "delivered_count" },
                { key: "10", label: "Complete", value: "completed_count" },
                { key: "11", label: "Cancelled", value: "canceled_count" },
                { key: "12", label: "Refunded", value: "refund_count" },
                { key: "13", label: "Unsynced", value: "goods_out_of_sync_count" },
                { key: "14", label: "Invalid shipping address", value: "undeliverable_address_count" },
            ],

            // tableCount: {
            //     all_count: 0,
            //     canceled_count: 0,
            //     completed_count: 0,
            //     delivered_count: 0,
            //     goods_out_of_sync_count: 0,
            //     have_pay_count: 0,
            //     have_logistics_count: 0,
            //     in_producting_count: 0,
            //     not_pay_count: 0,
            //     custom_count: 0,
            //     problem_state_count: 0,
            //     producting_ok_count: 0,
            //     testing_ok_count: 0,
            //     undeliverable_address_count: 0,
            //     refund_count: 0,
            // },
        };
    },
    computed: {
        innerCount () {
            let counts = this.counts;
            return this.inner.reduce((pre, cur) => pre + (counts[cur.value] || 0), 0)
        },
    },
    methods: {

        getText (item) {
            return item.label + '(' + this.counts[item.value] + ')'
        },

        tabsClick (item) {
            this.popper = false
            this.$emit('input', item.key)
            this.$emit('update', item.key)
        },

        onClick (event) {
            const contains = this.$el.contains(event.target)
            if (contains && event.target.closest('.order-tabs-inner button')) {
                event.stopPropagation();
                event.preventDefault();
                this.popper = !this.popper;
            } else if (contains && event.target.closest('.order-tabs-inner ul')) {
                // 对话框中的，不管
                // event.stopPropagation();
                // event.preventDefault();
            } else {
                this.popper = false
            }
        },
    },
    mounted () {
        window.addEventListener('click', this.onClick)
    },
    beforeDestroy () {
        window.removeEventListener('click', this.onClick)
    }
};
</script>
<style lang="scss" scoped>
.order-tabs {
    display: flex;
    align-items: center;
    height: 36px;
}

.order-tabs-outer {
    display: flex;
    li {
        padding: 9px 2px;
        line-height: 20px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        position: relative;
        margin-right: 18px;
        cursor: pointer;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: transparent;
            border-radius: 1px;
            transition: all 0.2s;
        }

        em {
            border-radius: 10px;
            border: 1px solid #e6e6e6;
            font-size: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            padding: 2px 4px;
            margin-left: 2px;
            min-width: 24px;
            height: 20px;
            line-height: 12px;
            box-sizing: border-box;
        }

        &:hover {
            &::before {
                background-color: #f6b2cd;
            }
        }

        &.active {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000;
            &::before {
                background-color: #ea4c89;
            }
        }
    }
}

.order-tabs-inner {
    position: relative;
    button {
        width: 32px;
        height: 32px;
        border: none;
        padding: 0;
        i {
            width: 32px;
            height: 32px;
            line-height: 32px;
            font-size: 24px;
            border-radius: 6px;
            transition: all 0.2s;
        }
        &:hover i {
            background: rgba(0, 0, 0, 0.06);
            color: #000;
        }
    }

    ul {
        z-index: 1;
        position: absolute;
        left: 50%;
        top: calc(100% - 5px);
        transform: translateX(-50%);
        background: #ffffff;
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        border: 1px solid #ebebeb;
        width: 240px;
        box-sizing: border-box;
        padding: 6px;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s;

        li {
            cursor: pointer;

            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            border-radius: 6px;
            background-color: transparent;
            transition: all 0.2s;
            span {
                display: block;
                padding: 0 8px;
            }

            &:hover,
            &.active {
                color: #000;
                background-color: #f6f6f6;
            }
        }
    }

    &.active {
        button i {
            background: rgba(0, 0, 0, 0.06);
        }
        ul {
            opacity: 1;
            pointer-events: all;
            top: calc(100% + 2px);
        }
    }
}
</style>
